import * as ol from '../openLayer'
import { anchorPointDefaultConfig } from './config'
/**
 * mark 样式
 * @param {*} config：{
 *  pointType： mark 点类型 CircleStyle： 小圆点，image： 使用外部图片，目前仅支持这两种样式，
 *  style:{ //  样式设置，聚合点使用内外圆+文字设置样式，，单点使用的是普通圆点样式 ，，
 *    // 公用属性
 *    url：  图片地址
 *    scale： 图片scale 大小
 *
 *    // 以下是 聚合点样式属性
 *    innerRadius： 内圆半径， 内圆是实心圆
 *    innerFillColor：内圆fill 颜色
 *    outerRadius：外圆半径，
 *    outerFillColor：外圆fill 颜色
 *    text： 文字提示
 *    textScale： 文字大小缩放
 *    textFillColor ： 文字fill 颜色
 *    textStrokeColor： 文字storke 颜色
 *    textStrokeStrokeWidth： 文字storke 宽度
 *    // 以下是单点样式属性
 *    radius：圆半径，
 *    fillColor：  圆 fill 颜色
 *    strokeColor： 圆storke 颜色
 *    strokeWidth： 圆storke 宽度
 *    size:  大小size
 *
 *   }
 * }
 * @param {*} type mark 模式 singleMark：单点模式，clusterMark：聚合点模式
 * @returns
 */
export function createMarksStyle (config = { pointType: 'CircleStyle', style: {} }) {
  let style = {}
  Object.assign(style, anchorPointDefaultConfig, config.style)
 
  if (config.pointType === 'CircleStyle') { // 圆点
    return markCircleStyle(style)
  } else if (config.pointType === 'image') { // 使用图片
    return markImageStyle(style)
  }
}

/**
 * 圆点
 * @param {*} config
 * @returns
 */
export function markCircleStyle (config) {
  // 内圆
  const innerCircle = new ol.CircleStyle({
    radius: config.innerRadius,
    fill: new ol.Fill({
      color: config.innerFillColor
    }),
    scale: config.scale
  })
  // 外圆
  const outerCircle = new ol.CircleStyle({
    radius: config.outerRadius,
    fill: new ol.Fill({
      color: config.outerFillColor
    }),
    stroke: new ol.Stroke({ color: config.outerStrokeColor, width: config.outerStrokeWidth }),
    scale: config.scale
  })
  return [
    new ol.Style({
      image: outerCircle
    }),
    new ol.Style({
      image: innerCircle
    })
  ]
}
/**
 * 图片
 * @param {*} config
 * @returns
 */
export function markImageStyle (config) {
  return new ol.Style({
    image: new ol.Icon({
      src: config.url,
      scale: config.imageScale
    })
  })
}
